<!-- 用户管理 -->
<template>
  <div class="app-container">
    <div class="allTabContent">
      <!-- <div>
        客户名称:
        <span> 测试 </span>
      </div>
      <div>
        设备数量:
        <span>3</span>
      </div> -->
    </div>
    <el-descriptions border>
      <el-descriptions-item label="门店名称">{{ storeInformationData.storeName }}</el-descriptions-item>
      <el-descriptions-item label="经纬度">{{ storeInformationData.lng }} , {{ storeInformationData.lat
        }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">
        <el-tag size="small">{{ storeInformationData.createTime }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="门店地址">
        {{ storeInformationData.address }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="Filters">
      <el-button type="success" icon="plus" @click="addDevicePopups" style="margin-left: 10px; margin-right: 10px">
        添加设备
      </el-button>
    </div>
    查看类型 <el-switch active-value="SALE" inactive-value="RENTAL" v-model="filters.isRent" active-text="销售"
      inactive-text="租赁" @change="getManagementPage" />
    <el-table v-loading="loading" ref="multipleTable" :data="pageData.records">
      <el-table-column label="设备编号" property="deviceCode" align="center" />
      <el-table-column label="设备名称" property="deviceName" align="center" />
      <el-table-column label="租售类型">
        <template #default="scope">
          {{ scope.row.isRent === 'RENTAL' ? '租赁' : '销售' }}
        </template>
      </el-table-column>
      <el-table-column label="租售价格">
        <template #default="scope">

          <template v-if="filters.isRent === 'RENTAL'">
            出租价格： <br>
            日租价格：{{ scope.row.rentalPrice.day }}元<br>
            月租价格：{{ scope.row.rentalPrice.mouth }}元<br>
            季度租价格：{{ scope.row.rentalPrice.quarter }}元<br>
            年租价格：{{ scope.row.rentalPrice.year }}元<br>
          </template>
          <template v-else>
            销售价格：{{ scope.row.salePrice }}元
          </template>
        </template>
      </el-table-column>
      <el-table-column label="租售情况">
        <template #default="scope">
          {{ scope.row.status === 'NO' ? '未销售' : '已出租' }}

        </template>
      </el-table-column>
      <el-table-column label="更新时间" property="updateTime" align="center" />

      <el-table-column label="操作" fixed="right" width="220">
        <template #default="scope">
          <el-button text type="primary" size="small" @click="handleClicks(scope.row, 1)">编辑</el-button>
          <el-button text type="danger" size="small" @click="handleClicks(scope.row, 2)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination @pagination="getManagementPage" v-if="filters.pages.total > 0" v-model:total="filters.pages.total"
      v-model:page="filters.pages.current" v-model:limit="filters.pages.size" />


    <el-dialog title="添加设备" v-model="addDevice">
      <div class="div-container fontColor_333">
        <el-form ref="AddruleFormRef" :model="DeviceFrom" label-width="auto" style="width: 300px"
          class="form-container">
          <el-form-item label="设备列表">

            <el-button type="primary" plain @click="storeDeviceList">{{ DeviceFrom.deviceList.length > 1 ?
              '当前已选设备' + DeviceFrom.deviceList.length : '请选择需要添加到门店的设备或设备列表' }} </el-button>
          </el-form-item>
          <el-form-item label="租售类型">
            <el-switch active-value="SALE" inactive-value="RENTAL" v-model="DeviceFrom.isRent" active-text="销售"
              inactive-text="租赁" />
          </el-form-item>
          <template v-if="DeviceFrom.isRent === 'RENTAL'">
            <el-form-item label="押金金额">
              <el-input v-model="DeviceFrom.depositPrice" style="max-width: 300px" placeholder="请输入押金金额">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="保险费">
              <el-input v-model="DeviceFrom.servicePrice" style="max-width: 300px" placeholder="请输入保险费">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="租赁价格">
              <div class="rentalPrice">
                天：
                <el-input v-model="DeviceFrom.rentalPrice.day" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
              <div class="rentalPrice">
                月：
                <el-input v-model="DeviceFrom.rentalPrice.mouth" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
              <div class="rentalPrice">
                季：
                <el-input v-model="DeviceFrom.rentalPrice.quarter" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
              <div class="rentalPrice">
                年：
                <el-input v-model="DeviceFrom.rentalPrice.year" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
            </el-form-item>
          </template>
          <template v-else-if="DeviceFrom.isRent === 'SALE'">
            <el-form-item label="销售价格">
              <el-input v-model="DeviceFrom.salePrice" style="max-width: 300px" placeholder="请输入销售价格">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="首付金额">
              <el-input v-model="DeviceFrom.firstPrice" style="max-width: 300px" placeholder="请输入首付金额">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="分期期数">
              <el-input v-model="DeviceFrom.periodsNum" style="max-width: 300px" placeholder="请输入分期期数">
                <template #append>期</template>
              </el-input>
            </el-form-item>
            <el-form-item label="服务年费">
              <el-input v-model="DeviceFrom.servicePrice" style="max-width: 300px" placeholder="请输入服务年费">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="addDevice = false">关闭</el-button>
          <el-button type="primary" @click="storeSave('add')">确定</el-button>
        </div>
      </template>
      <el-dialog v-model="innerVisible" width="80%" title="设备列表" append-to-body>
        <el-table v-loading="loading" ref="multipleTable" :data="assignableDevice"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" />
          <el-table-column label="设备编号" property="deviceCode" align="center" />
          <el-table-column label="设备名称" property="deviceName" align="center" />
          <el-table-column label="设备类型名称" property="deviceTypeName" align="center" />
          <el-table-column label="设备BT码" property="btcode" align="center" />
        </el-table>

        <pagination @pagination="storeDeviceList" v-if="assignableFilt.pages.total > 0"
          v-model:total="assignableFilt.pages.total" v-model:page="assignableFilt.pages.current"
          v-model:limit="assignableFilt.pages.size" />
        <template #footer>
          <div class="dialog-footer">
            <el-button type="info" @click="innerVisible = false">关闭</el-button>
            <el-button type="primary" @click="storeSaveSelection">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </el-dialog>

    <el-dialog title="编辑设备" v-model="editDevice">
      <div class="div-container fontColor_333">
        <el-form ref="AddruleFormRef" :model="editDeviceData" label-width="auto" style="width: 300px"
          class="form-container">
          <el-form-item label="租售类型">
            <el-switch active-value="SALE" inactive-value="RENTAL" v-model="editDeviceData.isRent" active-text="销售"
              inactive-text="租赁" />
          </el-form-item>
          <template v-if="editDeviceData.isRent === 'RENTAL'">
            <el-form-item label="押金金额">
              <el-input v-model="editDeviceData.depositPrice" style="max-width: 300px" placeholder="请输入押金金额">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="保险费">
              <el-input v-model="editDeviceData.servicePrice" style="max-width: 300px" placeholder="请输入保险费">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="租赁价格">
              <div class="rentalPrice">
                天：
                <el-input v-model="editDeviceData.rentalPrice.day" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
              <div class="rentalPrice">
                月：
                <el-input v-model="editDeviceData.rentalPrice.mouth" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
              <div class="rentalPrice">
                季：
                <el-input v-model="editDeviceData.rentalPrice.quarter" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
              <div class="rentalPrice">
                年：
                <el-input v-model="editDeviceData.rentalPrice.year" style="max-width: 300px" placeholder="请输入">
                  <template #append>元</template>
                </el-input>
              </div>
            </el-form-item>
          </template>
          <template v-else-if="editDeviceData.isRent === 'SALE'">
            <el-form-item label="销售价格">
              <el-input v-model="editDeviceData.salePrice" style="max-width: 300px" placeholder="请输入销售价格">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="首付金额">
              <el-input v-model="editDeviceData.firstPrice" style="max-width: 300px" placeholder="请输入首付金额">
                <template #append>元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="分期期数">
              <el-input v-model="editDeviceData.periodsNum" style="max-width: 300px" placeholder="请输入分期期数">
                <template #append>期</template>
              </el-input>
            </el-form-item>
            <el-form-item label="服务年费">
              <el-input v-model="editDeviceData.servicePrice" style="max-width: 300px" placeholder="请输入服务年费">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="editDevice = false">关闭</el-button>
          <el-button type="primary" @click="storeSave('edit')">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import StoreDeviceApi, { FencesPageQuery, assignableFiltQuery, DeviceForm, storeSelectList } from "@/api/storeDevice"
import StoreeApi, { InformationVO } from "@/api/store"

const emit = defineEmits();

let router = useRouter()
let addDevice = ref(false)
let editDevice = ref(false)
let innerVisible = ref(false)

// 通过defineProps接收父组件的值
const fatherElement = defineProps({
  // 接收传值   此处的father就是父组件的自定义名称 
  customerId: {
    type: String,  // 数据类型
    default: "1"  // 未传值时的默认值
  }
})
const loading = ref(false);

interface ManagementPageList {
  current: number;
  pages: number;
  size: number;
  total: number;
  records: any[];
}
let pageData = reactive<ManagementPageList>({
  current: 0,
  pages: 0,
  size: 0,
  total: 0,
  records: []
});
/**
@date: 2025-01-08 18:41:39
设备列表
*/
let filters = reactive<FencesPageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "total": 0,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  storeId: undefined,
  deviceCode: undefined,
  isRent: 'RENTAL',
  status: undefined,
});
let assignableFilt = reactive<assignableFiltQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "total": 0,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  deviceTypeId: undefined,
  deviceCode: undefined,
  btCode: undefined,
  deviceName: undefined,
});

let DeviceFrom = ref<DeviceForm>({
  deviceList: [],
  salePrice: '', // 销售价格
  firstPrice: '', //首付金额
  periodsNum: '', //分期期数
  servicePrice: '', //服务年费 / 保险费
  isRent: 'RENTAL', //租售类型
  depositPrice: '', //押金金额
  rentalPrice: {
    day: '', // 天
    mouth: '', // 月
    quarter: '', // 季
    year: '', // 年
  },
  storeId: ''
})



// 节流函数 useTimeoutFn
// 防抖函数 useThrottleFn
const { start: getManagementPage } = useTimeoutFn(() => {
  loading.value = true;
  filters.storeId = fatherElement.customerId

  let params = { ...filters }

  StoreDeviceApi.getStoreDevicePage(params)
    .then((data) => {
      pageData.records = data.records
      filters.pages.total = data.total;
      filters.pages.current = data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}, 200);

function addDevicePopups() {
  addDevice.value = true
  DeviceFrom.value.storeId = fatherElement.customerId
}
/** 表单提交 */
const storeSave = useThrottleFn((save) => {
  console.log(save, 66666);
  DeviceFrom.value.storeId = fatherElement.customerId

  if (save === 'edit') {
    let { ...newDeviceFrom } = editDeviceData.value;
    StoreDeviceApi.editDevice(newDeviceFrom)
      .then(() => {
        ElMessage.success("修改设备成功");
        getManagementPage()
        editDevice.value = false

      })
      .finally(() => (loading.value = false));
  } else if (save === 'add') {
    StoreDeviceApi.addDevice(DeviceFrom.value)
      .then(() => {
        ElMessage.success("添加设备成功");
        getManagementPage()
        addDevice.value = false


      })
      .finally(() => (loading.value = false));
  }

}, 3000);
onMounted(() => {
  getManagementPage()
});
let getpageType = ref(1)

let assignableDevice = ref<any[]>([])
function storeDeviceList() {
  innerVisible.value = true
  StoreDeviceApi.getAssignableDevice(assignableFilt)
    .then((data) => {
      assignableDevice.value = data.records
      assignableFilt.pages.total = data.total;
      assignableFilt.pages.current = data.current;

    })
    .finally(() => {
    });
}

let storeSelectionList = ref<storeSelectList[]>([])
function handleSelectionChange(val: storeSelectList[]) {
  storeSelectionList.value = val
}
function storeSaveSelection() {
  DeviceFrom.value.deviceList = storeSelectionList.value.map((item: any) => {
    return {
      deviceId: item.id,
      deviceCode: item.deviceCode
    }
  })
  innerVisible.value = false

}
// const DeptTrees = ref<any>()
let editDeviceData = ref<DeviceForm>({
  id: '',
  salePrice: '', // 销售价格
  firstPrice: '', //首付金额
  periodsNum: '', //分期期数
  servicePrice: '', //服务年费 / 保险费
  isRent: 'RENTAL', //租售类型
  depositPrice: '', //押金金额
  rentalPrice: {
    day: '', // 天
    mouth: '', // 月
    quarter: '', // 季
    year: '', // 年
  },
  storeId: ''
})
function handleClicks(row: DeviceForm, index: number) {
  editDeviceData.value = row
  for (let key in editDeviceData.value) {
    if (editDeviceData.value.hasOwnProperty(key)) { // 只遍历对象自身的属性
      console.log(key);
      editDeviceData.value[key] = row[key]
    }
  }
  if (index === 1) {
    editDevice.value = true
  } else {
    ElMessageBox.confirm("确认删除设备?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(
      function () {
        loading.value = true;
        StoreDeviceApi.deleteSave(row.id as string)
          .then(() => {
            ElMessage.success("删除成功");
            getManagementPage();
          })
          .finally(() => (loading.value = false));
      },
      function () {
        ElMessage.info("已取消删除");
      }
    );
  }
}

let storeInformationData = ref<InformationVO>(
  {
    "id": "",
    "creatorId": "",
    "createTime": "",
    "customerId": "",
    "parentId": "",
    "storeName": "",
    "address": "",
    "contact": "",
    "contactNumber": "",
    "lng": 0,
    "lat": 0,
    "enableFlag": "ENABLE",
    "updateTime": ""
  }
)
const { start: storeInformation } = useTimeoutFn(() => {
  StoreeApi.getStoreID(fatherElement.customerId).then((data) => {
    storeInformationData.value = data
  })
    .finally(() => (loading.value = false));
}, 200);


defineExpose({
  getManagementPage,
  storeInformation,
  getpageType
})
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;

  :deep(.el-row) {
    margin-bottom: 10px;

  }

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  &>div {
    margin-right: 5px;
  }
}

.popover-content {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
}

.popover-item {
  padding: 8px;
  /* 内边距 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击 */
  transition: background-color 0.3s, color 0.3s;
  /* 动画效果 */
}

.popover-item:hover {
  // background-color: #f0f0f0; /* 悬停时背景色 */
  color: #409EFF;
  /* 悬停时字体颜色 */
}

.rentalPrice {
  display: flex;
  margin-bottom: 10px;
}
</style>
